<!doctype html>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>管理后台</title>
	<link rel="stylesheet" type="text/css" href="../static/css/basic.css">
	<script src="../static/js/jquery.min.js"></script>
	<script src="../static/lib/bootstrap/js/bootstrap.min.js"></script>
	<script src="../static/js/jquery.ui.min.js"></script>
	<style>
		
		#deployRoleModal {
			margin-bottom: 95px;
			height: 500px;
			overflow-y: hidden;
		}
		.modal-content {
			overflow: auto;
			max-height: 500px;
		}
		.modal-header {
			padding: 10px;
		}
		.modal-footer {
			padding-top: 10px;
			padding-bottom: 30px;
		}
	</style>
</head>
<body>
	<!-- 权限配置模态框 -->
	<div class="modal  fade" id="deployRoleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-keyboard="false" data-backdrop="static">
	  <div class="modal-dialog modal-sm" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="deployButton">配置权限项</h4>
	      </div>
	      <div class="modal-body modal-body-deploy">
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default cancel-deploy" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-primary save-deploy">保存</button>
	      </div>
	    </div>
	  </div>
	</div>
	<!-- 权限模态框 end -->
	<script>
		function editRole(roleUid) {
			showPowerTree(roleUid);
			$("#deployRoleModal").modal();
		} 

		$(".save-deploy").click(function() {
			let firstMenuUid = [];
			let secondMenuUid = [];
			let powerId = [];
			$('input[name="checkbox-first-menu-uid"]:checked').each(function() {
				firstMenuUid.push($(this).val());
			});
			$('input[name="checkbox-second-menu-uid"]:checked').each(function() {
				secondMenuUid.push($(this).val());
			});
			$('input[name="checkbox-power-id"]:checked').each(function() {
				powerId.push($(this).val());
			});

			let roleUid = $("#roleUid").html();
			
			savePower({"firstMenuUid":firstMenuUid, "secondMenuUid":secondMenuUid, "powerId":powerId, "roleUid": roleUid});
		});

		//对已经选择checkbox进行打钩
		function setCheckboxChecked(res) {
			$('input[name="checkbox-first-menu-uid"]').each(function() {
				 let firstMenuUid = $(this).val();
				 if (res.ShowFirstMenuUid[firstMenuUid]) {
				 	$(this).attr("checked", true);
				 }
			});
			$('input[name="checkbox-second-menu-uid"]').each(function() {
				let secondMenuUid = $(this).val();
				if (res.ShowSecondMenuUid[secondMenuUid]) {
					$(this).attr('checked', true);
				}
			});
			$('input[name="checkbox-power-id"]').each(function() {
				let powerId = $(this).val();
				if (res.ShowPowerUid[powerId]) {
					$(this).attr('checked', true);
				}
			});
		}

		function getCheckboxFirstMenuUid() {
			let firstMenuUid = [];
			$('input[name="checkbox-first-menu-uid"]:checked').each(function() {
				 firstMenuUid.push($(this).val());
			});
			return firstMenuUid;
		}

		function getCheckboxSecondMenuUid() {
			let secondMenuUid = [];
			$('input[name="checkbox-second-menu-uid"]:checked').each(function() {
				 secondMenuUid.push($(this).val());
			});
			return secondMenuUid;
		}

		function getCheckboxPowerId() {
			let powerUid = [];
			$('input[name="checkbox-power-id"]:checked').each(function() {
				 powerUid.push($(this).val());
			});
			return powerUid;
		}

		function savePower(dataJSON) {
			$.ajax({
				url: "/save/power",
				data: dataJSON,
				success: function(res) {
					if (res.Code == 404) {
						window.parent.location = "/login.html";
						return;
					} else if (res.Code == 200) {
						alert("保存成功");
					} else {
						alert("保存失败");
					}
					$(".cancel-deploy").trigger('click');
				},

				error: function() {
					alert("系统异常，请稍后重试");
				}
			});
		}
		
		function showPowerTree(roleUid) {
			$.ajax({
				url: "/get/deployTree",
				async: false,
				data: {
					"roleUid": roleUid
				},

				success: function(res) {
					if (res.Code == 404) {
						window.parent.location = "/login.html";
						return;
					}
					$(".modal-body-deploy").html("");
					let str = '<span id="roleUid" style="display: none;">' + roleUid + '</span>';
					for (let i = 0; i < res.AllFirstMenu.length; i ++) {
						str +='<ul>';
						str += '<li><input type="checkbox" name="checkbox-first-menu-uid" class="checkbox-first-menu-uid" value="'+ res.AllFirstMenu[i].MenuUid +'">' + res.AllFirstMenu[i].FirstMenu + '</li>';
						for (let j = 0; j < res.AllSecondMenu.length; j ++) {
							str += '<ul>';
							if (res.AllSecondMenu[j].FirstMenuUid == res.AllFirstMenu[i].MenuUid) {
								str += '<li><input type="checkbox" name="checkbox-second-menu-uid" class="checkbox-second-menu-uid" value="' + res.AllSecondMenu[j].SecondMenuUid + '">' + res.AllSecondMenu[j].SecondMenu + '</li>';
								str += '<ul>';
								for (let k = 0; k < res.AllPower.length; k ++) {
									if (res.AllPower[k].SecondMenuUid == res.AllSecondMenu[j].SecondMenuUid) {
										str += '<li><input type="checkbox" name="checkbox-power-id" class="checkbox-power-id" value="' + res.AllPower[k].PowerId + '">' + res.AllPower[k].PowerItem + '</li>';
									}
								}
								str += '</ul>';
							}
							str += '</ul>';
						}
						str += '</ul>';
					}
					$(".modal-body-deploy").html(str);
					setCheckboxChecked(res);
				},

				error: function() {
					alert("系统异常，请稍后重试");
				}
			});
		}

		$(document).on("show.bs.modal", ".modal", function(){
    		$(this).draggable();
    		$(this).css("overflow-y", "hidden");   
    		// 防止出现滚动条，出现的话，你会把滚动条一起拖着走的
		});
		$(".modal-body-deploy").on("click",".checkbox-first-menu-uid", function() {
			if (this.checked) {
				$(this).parent().parent().children("ul").children('li').children('.checkbox-second-menu-uid').prop('checked', 'checked');
			} else {
				$(this).parent().parent().children("ul").children('li').children('.checkbox-second-menu-uid').removeAttr('checked');
				$(this).parent().parent().children("ul").children('ul').children('li').children('.checkbox-power-id').removeAttr('checked');
			}
		});
		$(".modal-body-deploy").on("click", ".checkbox-second-menu-uid", function() {
			if (this.checked) {
				$(this).parent().parent().parent().children('li').children('.checkbox-first-menu-uid').prop('checked', 'checked');
			} else {
				$(this).parent().parent().children("ul").children('li').children('.checkbox-power-id').removeAttr('checked');
				if (getCheckboxSecondMenuUid() <= 0) {
					$(this).parent().parent().parent().children('li').children('.checkbox-first-menu-uid').removeAttr('checked');
				}
			}
		});
		$(".modal-body-deploy").on("click", ".checkbox-power-id", function() {
			if (this.checked) {
				$(this).parent().parent().parent().children('li').children('.checkbox-second-menu-uid').prop('checked', 'checked');
				$(this).parent().parent().parent().parent().children('li').children('.checkbox-first-menu-uid').prop('checked', 'checked')
			} 
		});
	</script>
</body>
</html>